<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button id="btn">提交</button>

  <script>
    let btn = document.querySelector('#btn')
    // btn.onclick = function() {
    //   console.log('像后端发送请求');
    // }

    function handle(e) {
      console.log('向后端发送数据');
      // console.log(this);
      console.log(e);
    }// 防抖函数执行的业务逻辑

    
    btn.addEventListener('click', debounce(handle, 1000))

    // 防抖函数，传入业务逻辑和事件
    function debounce(fn, wait) {
      let timer = null
      // 这个e就是原本的事件参数，e会存在于args中
      return function (...args) {
        if (timer) clearTimeout(timer)// 用来清除前一个定时器
        timer = setTimeout(() => {
          fn.call(this, ...args)// 将fn中的this指向btn，并且将事件参数改为还是fn的，若在debounce返回的函数中调用则fn的this会指向全局
          // fn.apply(this, args)// 用apply不用解构，因为apply接收的是数组
          // fn()
        }, wait)
      }
    }
  </script>
</body>
</html>